<template>
  <div id="app">
    <button @click="flag = !flag">点击</button>
    <Home v-if="flag"/>
  </div>
</template>

<script>
import Home from './components/home'
export default {
    name: 'App',
    components: {
        Home
    },
    data() {
        return {
            flag: true,
            info: 'i am info of component'
        }
    },
    //数据没有 元素没有
    beforeCreate:function(){
        console.log("创建前========");
        console.log(this.info);
        console.log(this.$el);
    },
    //数据有 元素没有
    created:function(){
        console.log("已创建========");
        console.log(this.info);
        console.log(this.$el);
    },
    //数据有 元素有 虚拟dom
    beforeMount:function(){
        console.log("mount之前========");
        console.log(this.info);
        console.log(this.$el);
    },
    //数据有 元素有，真实dom
    mounted:function(){
        console.log("mounted========");
        console.log(this.info);
        console.log(this.$el);
    },
    beforeUpdate:function(){
        console.log("更新前========");
        console.log(this.flag);
        console.log(this.$el);
    },
    updated:function(){
        console.log("更新完成========");
        console.log(this.flag);
        console.log(this.$el);
    },
    beforeDestroy:function(){
        console.log("销毁前========");
        console.log(this.info);
        console.log(this.$el);
    },
    destroyed:function(){
        console.log("已销毁========");
        console.log(this.info);
        console.log(this.$el);
    }
}
</script>

<style></style>